import { defineComponent } from 'vue';
import SvgIcon from '@/components/svg-icon';
import { ElDivider, ElButton } from 'element-plus';
import _ from 'lodash-es';
import $style from './index.module.scss';

export default defineComponent({
    setup() {
        const list = [
            {
                type: 'button',
                svgIcon: 'database-connect',
                label: '连接',
                children: []
            },
            {
                type: 'button',
                svgIcon: 'database-new-search',
                label: '新建查询'
            },
            {
                type: 'divider'
            },
            {
                type: 'button',
                svgIcon: 'database-table',
                label: '表',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-view',
                label: '视图',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-function',
                label: '函数',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-user',
                label: '用户',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-others',
                label: '其它',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-search',
                label: '查询',
                children: [],
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-backup',
                label: '备份',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-auto-run',
                label: '自动运行',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-model',
                label: '模型',
                activeKey: ''
            },
            {
                type: 'button',
                svgIcon: 'database-chart',
                label: '图表',
                activeKey: 'chart'
            },
        ];

        return () => (<div class={$style.controllerBar}>
            {_.map(list, item => {
                let dom;

                switch (item.type) {
                    case 'button':
                        dom = <ElButton class={$style.controllerItem} key={item.svgIcon} title={item.label}>
                            <SvgIcon name={item.svgIcon} />
                            <span>{item.label}</span>
                        </ElButton>;
                        break;

                    case 'divider':
                        dom = <ElDivider direction="vertical" class={$style.divider} />;
                        break;

                    default:
                        break;
                }

                return dom
            })}
        </div>)
    }
})